<template>
  <div class="infoSet-wrap">
    <el-form ref="oneForm" label-width="100px">
      <el-form-item label="手机号码">
        <span>{{showPhone}}</span>
      </el-form-item>
      <el-form-item label="姓名">
        <span>{{userInfo.username}}</span>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="reqParams.gender" label="1">男</el-radio>
        <el-radio v-model="reqParams.gender" label="2">女</el-radio>
      </el-form-item>
      <el-form-item label="QQ号">
        <el-input
          v-model="reqParams.qq"
          maxlength="11"
          oninput="value=value.replace(/[^\d]/g, '')"
          placeholder="请输入QQ号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input
          v-model="reqParams.telephone"
          maxlength="11"
          oninput="value=value.replace(/[^\d]/g, '')"
          placeholder="请输入联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item class="select-region" label="所在地区">
        <el-select
          v-model="reqParams.province_id"
          placeholder="请选择"
          @change="getCitiesList(reqParams.province_id)"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>

        <el-select
          v-model="reqParams.city_id"
          collapse-tags
          style="margin-left: 20px;"
          placeholder="请选择"
          @change="clearAddress"
        >
          <el-option v-for="item in citiesList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label>
        <el-input v-model="reqParams.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>

      <el-form-item label>
        <el-button class="infoSet-btn" @click="saveInfo">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getUserInfo } from "@/api/accountSettings";
import { getProvinceAjax, getCityAjax } from "@/api/authentication";
import { modifyUserInfo } from "@/api/user";
export default {
  name: "infoSet",
  data() {
    return {
      userInfo: {},
      defaultInfo: {},
      reqParams: {
        userid: "",
        gender: "",
        telephone: "",
        province_id: "",
        city_id: "",
        address: "",
        qq: ""
      },
      provinceList: [],
      citiesList: [],
      showPhone: "",
      setFlag: false
    };
  },
  created() {
    this._getUserInfo();
  },
  methods: {
    // 获取用户信息
    _getUserInfo() {
      getUserInfo().then(res => {
        this.userInfo = res.data;
        let {
          userid,
          telephone,
          gender,
          province_id,
          city_id,
          address,
          qq
        } = res.data;
        this.defaultInfo = {
          userid,
          gender,
          telephone,
          province_id,
          city_id,
          address,
          qq
        };
        this.defaultInfo.gender = this.defaultInfo.gender.toString();
        console.log("账户信息", this.userInfo);
        this.reqParams.gender = res.data.gender.toString();
        this.reqParams.userid = res.data.userid;
        this.reqParams.telephone = res.data.telephone;
        this.reqParams.province_id = res.data.province_id;
        this.reqParams.qq = res.data.qq;
        let reg = /^(\d{3})\d+(\d{4})$/;
        this.showPhone = this.userInfo.loginphone.replace(reg, "$1****$2");
        if (this.reqParams.province_id) {
          this.getCitiesList(this.reqParams.province_id);
        }
        this.reqParams.city_id = res.data.city_id == 0 ? "" : res.data.city_id;
        this.reqParams.address = res.data.address;
      });
      this._getProvinceAjax();
    },
    // 获取省份列表数据
    _getProvinceAjax() {
      getProvinceAjax().then(res => {
        console.log("获取省份列表数据res", res.data);
        this.provinceList = res.data;
      });
    },
    // 获取县市列表数据
    getCitiesList(id) {
      this.reqParams.city_id = "";
      this.reqParams.address = "";
      let params = {
        province_id: id
      };
      getCityAjax(params).then(res => {
        if (res.code == 1) {
          this.citiesList = res.data;
        } else {
          this.$message.error(res.msg || "获取县市列表失败");
          this.citiesList = [];
        }
      });
    },
    clearAddress() {
      this.reqParams.address = "";
    },
    // 修改用户信息
    saveInfo() {
      console.log("参数", this.reqParams, this.defaultInfo);
      for (let key in this.reqParams) {
        if (this.reqParams[key] != this.defaultInfo[key]) {
          this.setFlag = true;
        }
      }
      console.log(this.setFlag);

      if (this.setFlag) {
        const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
        if (this.reqParams.qq && this.reqParams.qq.length < 5) {
          this.$message.error("请输入正确的qq号");
        } else if (
          this.reqParams.telephone &&
          !reg.test(this.reqParams.telephone)
        ) {
          this.$message.error("请输入正确的手机号");
        } else {
          modifyUserInfo(this.reqParams).then(res => {
            this.$message.success(res.msg);
            setTimeout(() => {
              window.location.reload();
            }, 1000);
          });
        }
      }
    }
  }
};
</script>

<style lang="scss" >
.infoSet-wrap {
  .el-form {
    .el-form-item {
      .el-form-item__label {
        padding-right: 30px;
      }
      &.select-region {
        .el-form-item__content {
          display: flex;
          justify-content: space-between;
        }
        .el-select {
          width: 50%;
        }
      }
    }
  }
}
</style>

<style lang='scss' scoped>
.infoSet-wrap {
  width: 420px;
  background: #fff;
  margin: 65px 0 80px 230px;
  .el-form {
    .el-form-item {
      .infoSet-btn {
        width: 160px;
        height: 40px;
        background: #ff7f5b;
        color: #fff;
      }
    }
  }
}
</style>